<template>
  <div class="banner-carousel">
    <el-carousel
        :interval="4000"
        :height="height"
        arrow="never"
    >
      <el-carousel-item v-for="(banner, index) in banners" :key="index">
        <div class="banner-item" @click="handleBannerClick(banner)">
          <img
              :src="banner.image"
              :alt="banner.title || '轮播图'"
              class="banner-image"
          />
          <div class="banner-overlay"></div>

        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

// ... existing code ...
<script setup lang="ts">
import {computed, ref} from 'vue'
import { useRouter } from 'vue-router'

interface Banner {
  id: number
  title: string
  description: string
  image: string
  link?: string
  buttonText?: string
}

const props = defineProps<{
  height?: string
  banners?: Banner[]
}>()

const router = useRouter()

const defaultBanners = ref<Banner[]>([])

const banners = computed(() => props.banners || defaultBanners.value)

const handleBannerClick = (banner: Banner) => {
  if (banner.link) {
    router.push(banner.link)
  }
}
</script>


<style scoped>
.banner-carousel {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.banner-item {
  width: 100%;
  height: 100%;
}

.banner-image {
  width: 100%;
  height: 100%;
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1));
  z-index: 1;
  pointer-events: none;
}


@media (max-width: 768px) {
  .banner-item {
    text-align: center;
  }
}

</style>
